<template>
	<view>
		<view class="p-12">
			<view class="flex flex-y-center">
				<view class="flex flex-y-center round-30 bg-eee py-5 px-12 flex-1">
					<view class="iconfont icon-sousuo fs-15 fw-600 text-999 mr-6"></view>
					<input placeholder="请输入关键字搜索" v-model='query.name' placeholder-class="fs-12 " @confirm="search()" />
				</view>
				<text class="fs-14 ml-6" @click="search()">搜索</text>
			</view>
		</view>

		<view class="vw-100 h-6 bg-eee "></view>
		<y-tabs :list='categoryList' @selected="changeTabs"></y-tabs>
		<view class="vw-100 h-6 bg-eee "></view>

		<z-paging ref='paging' v-model="list" use-page-scroll @query="getList">
			<view>
				<view class="p-16 flex flex-y-center box-sizing w-p-100" v-for="(item,index) in list" :key="index"
					@click="$page.open('/pages/community/detail?id='+item.id)">
					<image :src="item.cover_image" class="w-80 h-80 round-10 img_flex"></image>
					<view class="flex flex-column px-12 flex-1">
						<text class="fs-18 text-ellipsis-1">{{item.name}}</text>
						<text class="fs-14 text-666 mt-6 text-ellipsis-3">{{item.desc}}</text>
					</view>
					<view>
						<button class="w-100 text-white round-30 fs-14"
							:style="`background-color:${item.button_color}`">
							{{item.button_text}}
						</button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom, onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { useStorage, $http, $page } from '@/utils/index'
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const categoryList = ref()
	const list = ref([])
	const paging = ref()
	const query = ref({
		page: 1,
		limit: 10,
		category_id: 9999,
		name: '',
		type: 2
	})
	onLoad(() => {
		getCategory()
	})

	const getCategory = () => {
		$http.get('Category/getList').then(res => {
			categoryList.value = res.data
		})
	}
	const changeTabs = (e) => {
		query.value.category_id = e.id
		paging.value.reload()
	}

	const search = () => {
		if (query.value.name != '') {
			paging.value.reload()
		}
	}

	const getList = (page, limit) => {
		query.value.page = page
		query.value.limit = limit
		$http.get('Community/getList', query.value).then(res => {
			paging.value.complete(res.data)
		})
	}

	//分享
	onShareTimeline(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			query: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})

	onShareAppMessage(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			path: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})
</script>

<style scoped>
	.scrolling-text {
		overflow: hidden;
		white-space: nowrap;
		animation: scroll 5s linear infinite;
	}

	@keyframes scroll {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}
</style>